<template>
  <el-container>
    <!-- ----------左侧-------------------- -->
    <!-- 属性绑定 -->
  <el-aside :width='isCollapse?"65px":"200px"'>
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse='isCollapse'
      :collapse-transition="false"
      router
      >
      <!-- router 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
      <!-- :collapse-transition="false" 清除动画效果,布尔值，如果不加冒号则为字符串-->
      <!-- <img src="" alt=""> -->
      <el-menu-item index="/home" :style="{width:isCollapse?'65px':'200px'}">
        <i class="el-icon-location"></i>
        <span slot="title">首页</span>
      </el-menu-item>
              <!-- 通过对象方式属性绑定style -->
      <el-submenu index="2" :style="{width:isCollapse?'65px':'200px'}">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>内容管理</span>
        </template>
        <!-- <el-menu-item-group> -->
          <el-menu-item index="/articleadd">发布文章</el-menu-item>
          <el-menu-item index="/article">文章列表</el-menu-item>
          <el-menu-item index="2-3">评论列表</el-menu-item>
          <el-menu-item index="/material">素材管理</el-menu-item>
        <!-- </el-menu-item-group> -->
      </el-submenu>

      <el-menu-item index="3" :style="{width:isCollapse?'65px':'200px'}">
        <i class="el-icon-location"></i>
        <span slot="title">粉丝管理</span>
      </el-menu-item>

      <el-menu-item index="/account" :style="{width:isCollapse?'65px':'200px'}">
        <i class="el-icon-location"></i>
        <span slot="title">账户信息</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
  <el-container>
    <!-- -------------头部------------------ -->
    <el-header>
      <!-- 头部的左侧 -->
      <div id="lt">
             <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse=!isCollapse" style="font-size:20px;margin-right:4px"></i>
            <span>江苏传智播客教育科技股份有限公司</span>
      </div>
      <!-- 头部的右侧 -->
      <div id="rt">
           <el-input placeholder="请输入搜索的文章内容" style="width:240px;">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <span style="margin:0 10px">消息</span>

          <!-- 下拉菜单 -->
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
                <img :src="photo" alt width="40" height="40" style="margin-right:10px;border-radius:50%">
                 {{name}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>git地址</el-dropdown-item>
                <!-- 设置.native事件修饰符，因为组件被编译为标签，不知道作用在哪个标签上，使用事件修饰符可以具体作用在某个标签上 -->
                <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
// 引入bus.js
import bus from '@/utils/bus.js'
export default {

  data () {
    return {
    //  是否折叠
      isCollapse: false,
      tempname: '',
      tempphoto: ''
    }
  },
  // 在页面开启时发送请求
  created () {
    bus.$on('upAccountName', nm => {
      // console.log(nm)
      this.tempname = nm
      // 对sessionStorage内部数据进行更新
      let userinfo = JSON.parse(window.sessionStorage.getItem('userinfo'))
      // 将传递回来的数据赋值给内部
      userinfo.name = nm
      // 再存回内部，即实现永久更新
      window.sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
    })
    bus.$on('upAccountPhoto', ph => {
      // console.log(nm)
      this.tempphoto = ph
      // 对sessionStorage内部数据进行更新
      let userinfo = JSON.parse(window.sessionStorage.getItem('userinfo'))
      // 将传递回来的数据赋值给内部
      userinfo.photo = ph
      // 再存回内部，即实现永久更新
      window.sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
    })
  },
  // 头像和名称
  computed: {
    name () {
      return this.tempname || JSON.parse(window.sessionStorage.getItem('userinfo')).name
    },
    photo () {
      return this.tempphoto || JSON.parse(window.sessionStorage.getItem('userinfo')).photo
    }
  },
  methods: {
    logout () {
      // 组件
      this.$confirm('确定退出吗?', '退出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.sessionStorage.clear()
        this.$router.push('/login')
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang='less' scoped>
  .el-container{
    height: 100%;
    .el-aside{
      background-color: #323745;
    }
    .el-header{
      // background-color: skyblue;
      display: flex;
      justify-content: space-between;
      #lt{
        width: 40%;
        display: flex;
        align-items: center;
      }
      #rt{
        height: 100%;
        width: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .el-dropdown-link{
          display: flex;
          align-items: center;
          height: 100%s;
        }
      }
    }
    .el-main{
      background-color: green;
    }
  }
</style>
